<template>
  <div class="search">
    <div class="left-icon"></div>
    <!-- v-model 可以直接用在表单标签上 实现双向绑定 -->
    <div class="ipt-box">
      <input v-model="modelValue" @input="onInput" type="text" />
    </div>
    <div class="right-icon" @click="clear"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
const props = defineProps({
  // 这个是v-model的默认值
  modelValue: {
    type: String,
  },
});
const emit = defineEmits(["update:modelValue", "change", "clear"]);
//可以先不传props 用这个进行基本功能的开发
const _value = ref<string>("");
// input 的原生事件 先参考这篇 https://blog.csdn.net/weixin_42265852/article/details/106612541
/**
 * onchange 失去焦点 value改变时触发
 * onblur 失焦
 * onfocus 聚焦
 */
const onInput = () => {
  // 为空就不执行 _value.value 可用这个测试
  if (!props.modelValue) return;
  // 同步修改 父组件的v-model绑定的值
  emit("update:modelValue", props.modelValue);
  // 提供change调用 这里我用了其他的命名  表示可以随意命名
  emit("change", props.modelValue);
};
// 清除
const clear = () => {
  // 文档上是这么用的
  emit("update:modelValue", "");
  emit("clear");
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 6px 10px;
  background: #292d39;
  color: #fff;
  display: flex;
  align-items: center;
}
.ipt-box {
  width: 100%;
  padding: 0 6px;
  input {
    font-size: 18px;
    width: 100%;
    height: 36px; //我这边写死一个高度
    background: #292d39; //你可以注释看看高度
    border: none; //可以清楚input标签的边框默认样式
  }
}
.left-icon,
.right-icon {
  width: 20px;
  height: 20px;
  background-color: #fff;
}
</style>